<template>
  <div>
    <a-list :grid="{ gutter: 16, column: 4 }" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card :title="item.title + '(LuLu)'">
          <div class="Task_Content">
            <div>发布时间：2000-10-10</div>
            <div>结束时间：2000-10-10</div>
            <div>
              完成状态：
              <a-tag v-if="item.status" color="green">完成</a-tag>
              <a-tag v-else color="red"> 未完成 </a-tag>
            </div>
            <div>
              <a-button type="primary" @click="showTestTab(item.title)">
                开始测试
              </a-button>           
            </div>
          </div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
const data = [
  {
    title: "测试1",
    status: true,
  },
  {
    title: "Title 2",
    status: false,
  },
  {
    title: "Title 3",
    status: false,
  },
  {
    title: "Title 4",
    status: false,
  },
  {
    title: "Title 5",
    status: false,
  },
  {
    title: "Title 6",
    status: false,
  },
  {
    title: "Title 6",
    status: false,
  },
  {
    title: "Title 6",
    status: false,
  },
  {
    title: "Title 6",
    status: false,
  },
  {
    title: "Title 6",
    status: false,
  },
];
export default {
  props: {
    add: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      data,
    };
  },
  methods: {
    showTestTab(title) {
      this.add(title,"testPage");
    },
  }
};
</script>

<style lang="less">
.ant-list {
  width: 80%;
  margin: 0 auto;    
  .ant-card-body {
    padding: 10px;   
    .Task_Content {
      div {
        padding: 1%;
        &:nth-last-child(1) {
          display: flex;
          flex-direction: row-reverse;
          .ant-btn-primary {
            background-color: #7b9e31;
            border: none;
          }         
        }
      }
    }
  }
}
</style>